<template>
  <div class="content">
    <Popover placement="bottom">
      <div class="button">向下</div>

      <template #content>
        <div class="popover-content"></div>
      </template>
    </Popover>
    <Popover placement="top">
      <div class="button">向上</div>

      <template #content>
        <div class="popover-content"></div>
      </template>
    </Popover>
    <Popover placement="left">
      <div class="button">向左</div>

      <template #content>
        <div class="popover-content"></div>
      </template>
    </Popover>
    <Popover placement="right">
      <div class="button">向右</div>

      <template #content>
        <div class="popover-content"></div>
      </template>
    </Popover>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.content {
  display: flex;
}

.button {
  background: $main-color;
  padding: 4px 15px;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.popover-content {
  width: 200px;
  height: 100px;
}
</style>
